<template>
  <div>
    <van-nav-bar
      title="影院"
      @click-left="onClickLeft()"
      @click-right="onClickRight()"
    >
      <template #right>
        <van-icon name="search" size="23" color="black"/>
      </template>
      <template #left>
        {{ cityName }}<van-icon name="arrow-down" color="black"/>
      </template>
    </van-nav-bar>
    <div class="cinema" :style="{height:height}">
    <van-list>
      <van-cell v-for="data in cinemaLists" :key="data.cinemaId">
        <h3>{{data.name}}</h3>
        <div class="address">{{data.address}}</div>
      </van-cell>
    </van-list>
  </div>
  </div>
</template>

<script>

import BetterScroll from 'better-scroll'
import Vue from 'vue'
import { NavBar, Icon, List, Cell } from 'vant'
import { mapState, mapMutations, mapActions } from 'vuex'

Vue.use(NavBar).use(Icon).use(List).use(Cell)

export default {
  name: '',

  data () {
    return {
      cinemaList: [],
      height: 0
    }
  },
  computed: {
    ...mapState('CinemaModule', ['cinemaLists']),
    ...mapState('CityModule', ['cityId', 'cityName'])
  },
  methods: {
    ...mapActions('CinemaModule', ['getCinemaList']),
    ...mapMutations('CinemaModule', ['clearCinemaList']),
    onClickLeft () {
      this.$router.push('/city')
      // 清空cinemalist
      this.clearCinemaList()
    },
    onClickRight () {
      this.$router.push('/cinema/search')
    }
  },
  mounted () {
    // 访问cityid cityname

    this.height = document.documentElement.clientHeight - 100 + 'px'

    if (this.cinemaLists.length === 0) {
      // 异步请求数据
      this.getCinemaList(this.cityId).then((res) => {
        this.$nextTick(() => {
          new BetterScroll('.cinema', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      // console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
  }
}

</script>
<style scoped lang='less'>
.cinema{
  height: 300px;
  overflow: hidden;
  position: relative;
}
</style>
